<template>
  <div class="main-1">
    <div class="home" @click="BackHome">首 页</div>
    <div class="down">
      <div class="left-zai">
        <div class="famous">
          <img src="../assets/svg/famous.svg" alt />
        </div>
        <h2 class="font-1">灾害事件</h2>
        <br />
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column
            prop="address"
            label="发生地点"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="灾害类型"
            width="120"
          ></el-table-column>
          <el-table-column prop="time" label="发生时间"></el-table-column>
        </el-table>
      </div>

      <div class="center-zai">
        <div
          ref="conversion1"
          :style="{ width: '840px', height: '680px' }"
        ></div>
      </div>

      <div class="right-zai">
        <h2 class="font-2">自然灾害知识库</h2>
        <div class="famous-1">
          <img src="../assets/svg/famous.svg" alt />
        </div>
        <p class="peep">
          地震中受困伤员由于大量出汗、出血，无法补充足够水分，可出现出现低血容量休克；
          受压部位大量肌肉组织损伤、坏死，当压迫解除、血供恢复后大量肌红蛋白、钾离子进入
          血液循环，造成高钾血症、肌红蛋白血症；加上肾血管收缩和休克，肾灌注压进一步降低，
          尿液酸化，肌红蛋白快速形成结晶，堵塞肾小管，加重肾脏损害，最终可导致急性肾功能
          衰竭，在很多情况下，非专业的救援人员对坍塌的建筑物内是否存在幸存者缺乏辨别经验，
          因而导致一些受灾人员失去最佳抢救时间。此外，建筑物废墟存在很多可知和不可知的危险
          因素，非专业的救援人员对这些危险因素缺乏认知，容易导致建筑物进一步坍塌。
        </p>
        <hr
          style="
            border-color: #3fc5ff;
            margin-top: 20px;
            width: 300px;
            filter: blur(1px);
            margin-left: 50px;
          "
        />
        <p class="peep">
          专业救援人员掌握正确的搜救知识和技巧，拥有专业的搜救工具和丰富的搜救经验，
          能将有关危险降至最小，并提高受灾人员的生还率。因此，应尽量多派经验丰富的
          专业人员参与震后搜救工作，并加强对非专业救援人员的现场紧急培训。
          震后搜救到了一定程度，需要有选择性地一点一点清理废墟。
        </p>
        <p class="peep">
          由于余震和受损建筑物的不稳定性，这是一项非常危险的工作，要加倍小心。需要强调的是，
          在清理废墟的同时要继续进行搜寻工作，随时准备抢救此前未发现的幸存者。因此，搜救工
          作应该是持续性的，直到所有受损建筑物检查完毕，废墟清理工作全部完成，以及寻找幸存
          者的希望完全消失，搜救工作才应宣布结束。
        </p>
      </div>
    </div>
    <div class="up">
      <div class="up-left">
        <dv-decoration-3
          style="width: 250px; height: 30px; margin-left: 30px"
        />
      </div>
      <div class="up-right">
        <dv-decoration-3
          style="width: 250px; height: 30px; margin-left: 1620px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    this.getCharts1();
  },
  methods: {
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: rgba(54,230,208,0.4);color: #fff;font-weight: 700;font-size:18px";
      }
    },
    BackHome() {
      this.$router.push({
        path: "/"
      });
      // location.reload();
    },
    getCharts1() {
      var colors = [
        {
          c1: "#AF5AFF",
          c2: "#B62AFF"
        },
        {
          c1: "#25dd59",
          c2: "#29f463"
        },
        {
          c1: "#6E35FF",
          c2: "#6E67FF"
        },
        {
          c1: "#002AFF",
          c2: "#0048FF"
        },
        {
          c1: "#8CD282",
          c2: "#95F300"
        },

        {
          c1: "#4a3ac6",
          c2: "#604BFF"
        }
      ];

      function getData() {
        let data = {
          name: "地震",
          value: 0,
          list: []
        };

        for (let i = 1; i <= 1; i++) {
          let obj = {
            name: "泥石流",
            value: i,
            list: []
          };
          let obj1 = {
            name: "滑坡",
            value: i,
            list: []
          };
          let obj2 = {
            name: "成因",
            value: i,
            list: []
          };
          let obj3 = {
            name: "前兆",
            value: i,
            list: []
          };
          let obj4 = {
            name: "塌陷",
            value: i,
            list: []
          };

          for (let j = 1; j <= 4; j++) {
            if (j == 1) {
              let ob = {
                name: `动植物异常，动物惊恐
不安，不入睡，植物形
态发生变化，树叶枯萎
或歪斜等现象`,
                value: 1 + "-" + i + "-" + j
              };
              let ob1 = {
                name: `滑坡前缘坡角处，有堵塞的
泉水复活或泉水，井水突然
干涸`,
                value: 1 + "-" + i + "-" + j
              };
              let ob2 = {
                name: `塌陷地震由于地下岩洞或矿井顶部塌陷地
震，这类地震的规模比较小，次数也少，
即使有也往往发生在溶洞密布的石灰岩地
区或大规模地下开采矿区`,
                value: 1 + "-" + i + "-" + j
              };
              let ob3 = {
                name: `生物异常:牛羊骡马不进厩，猪
不吃食狗乱吠，鸭不下水岸上
闹，鸡飞树上高声叫`,
                value: 1 + "-" + i + "-" + j
              };
              let ob4 = {
                name: `地面变形`,
                value: 1 + "-" + i + "-" + j
              };
              obj.list.push(ob);
              obj1.list.push(ob1);
              obj2.list.push(ob2);
              obj3.list.push(ob3);
              obj4.list.push(ob4);
            }
            if (j == 2) {
              let ob = {
                name: `沟内有轰鸣声，主河流水上
涨和正常流水突然中断
`,
                value: 1 + "-" + i + "-" + j
              };
              let ob1 = {
                name: `滑坡上的观测点明显位移`,
                value: 1 + "-" + i + "-" + j
              };
              let ob2 = {
                name: `人工地震地下核爆炸、炸药爆破等人为引起的
地面震动称为诱发地震，如工业爆破、地下核
爆炸造成怼震动`,
                value: 1 + "-" + i + "-" + j
              };
              let ob3 = {
                name: `地声异常:是指地震前来自地下的
声音。其声有如炮响雷鸣，也有如
重车行驶、 大风古荡等`,
                value: 1 + "-" + i + "-" + j
              };
              let ob4 = {
                name: `地面积水引起地面气泡、水
泡、旋流等`,
                value: 1 + "-" + i + "-" + j
              };
              obj.list.push(ob);
              obj1.list.push(ob1);
              obj2.list.push(ob2);
              obj3.list.push(ob3);
              obj4.list.push(ob4);
            }
            if (j == 3) {
              let ob = {
                name: `主要分布在宁南黄土丘陵地
区、贺兰山东麓、卫宁北以
及香山等地`,
                value: 1 + "-" + i + "-" + j
              };
              let ob1 = {
                name: `滑坡前缘出现鼓丘`,
                value: 1 + "-" + i + "-" + j
              };
              let ob2 = {
                name: `诱发地震由于水库蓄水、油田
注水等活动而引发的地震称为
诱发地震，这类地震仅仅在某
些特定怼水库库区或油田地区
发生`,
                value: 1 + "-" + i + "-" + j
              };
              let ob3 = {
                name: `地下水异常: 主要异常有发浑、
冒泡、翻花、升温、变色、变
味、突升、突降、井孔变形、泉
源突然枯竭或涌出`,
                value: 1 + "-" + i + "-" + j
              };
              let ob4 = {
                name: `主要分布在石嘴山、石炭
井、灵武东部矿区、王洼煤
矿以及冯记沟矿区`,
                value: 1 + "-" + i + "-" + j
              };
              obj.list.push(ob);
              obj1.list.push(ob1);
              obj2.list.push(ob2);
              obj3.list.push(ob3);
              obj4.list.push(ob4);
            }
            if (j == 4) {
              let ob = {
                name: `不合理开挖修建铁路、公路、
水渠以及其它工程建筑的不合
理开挖`,
                value: 1 + "-" + i + "-" + j
              };
              let ob1 = {
                name: `节房屋倾斜出现醉汉林、马刀`,
                value: 1 + "-" + i + "-" + j
              };
              let ob2 = {
                name: `在深井中进行高压注水以及
大水库蓄水后由于增加了地壳怼压力，有时也
会诱发地震`,
                value: 1 + "-" + i + "-" + j
              };
              let ob3 = {
                name: `水库蓄水，石油和天然气、
盐卤、地下热（汽）储的开发，废液处理和油
田开采中的深井注水`,
                value: 1 + "-" + i + "-" + j
              };
              let ob4 = {
                name: `建筑物作响、倾斜、开裂。
泉、井的异常变化`,
                value: 1 + "-" + i + "-" + j
              };
              obj.list.push(ob);
              obj1.list.push(ob1);
              obj2.list.push(ob2);
              obj3.list.push(ob3);
              obj4.list.push(ob4);
            }
          }

          data.list.push(obj);
          data.list.push(obj1);
          data.list.push(obj2);
          data.list.push(obj3);
          data.list.push(obj4);
        }
        var arr = [];
        arr.push(data);

        return arr;
      }

      var listData = getData();
      var list = [];
      var links = [];
      var legend = [];

      var categories = listData[0].list.map(item => {
        return {
          name: item.name
        };
      });

      var legendColor = colors.map(item => item.c2);

      handle2(JSON.parse(JSON.stringify(listData)), 0);
      handle3(JSON.parse(JSON.stringify(listData)), 0);

      //计算list
      function handle2(arr, idx, color, category) {
        arr.forEach((item, index) => {
          if (item.name === null) {
            return false;
          }
          // 设置节点大小
          let symbolSize = 10;
          switch (idx) {
            case 0:
              symbolSize = 100;
              break;
            case 1:
              symbolSize = 60;
              break;
            default:
              symbolSize = 10;
              break;
          }

          // 每个节点所对应的文本标签的样式。
          let label = null;
          switch (idx) {
            case 0:
            case 1:
              label = {
                position: "inside",
                rotate: 0
              };
              break;
            default:
              break;
          }

          //计算出颜色,从第二级开始
          if (idx === 0) {
            color = colors[0];
          }
          if (idx == 1) {
            color = colors.find((itemm, eq) => eq == index % 10);
            legend.push(item.name);
          }
          // 设置线条颜色
          let lineStyle = {
            color: color.c2
          };
          // 设置节点样式
          let bgcolor = null;
          if (idx === 0) {
            bgcolor = {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: color.c1 // 0% 处的颜色
                },
                {
                  offset: 0.8,
                  color: color.c1 // 80% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0, 0, 0, 0.3)" // 100% 处的颜色
                }
              ],
              global: false
            };
          } else {
            bgcolor = {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: color.c1 // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: color.c1 // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: color.c2 // 100% 处的颜色
                }
              ],
              global: false
            };
          }
          let itemStyle = null;
          if (item.list && item.list.length !== 0) {
            //非子节点
            itemStyle = {
              borderColor: color.c2,
              color: bgcolor
            };
          } else {
            //子节点
            item.isEnd = true;
            if (item.isdisease == "true") {
              itemStyle = {
                color: color.c2,
                borderColor: color.c2
              };
            } else {
              itemStyle = {
                color: "transparent",
                borderColor: color.c2
              };
            }
          }
          //可以改变来实现节点发光效果，但体验不好
          itemStyle = Object.assign(itemStyle, {
            shadowColor: "rgba(255, 255, 255, 0.5)",
            shadowBlur: 10
          });

          if (idx == 1) {
            category = item.name;
          }
          let obj = {
            name: item.name,
            symbolSize: symbolSize,
            category: category,
            label,
            color: bgcolor,
            itemStyle,
            lineStyle
          };
          obj = Object.assign(item, obj);
          if (idx === 0) {
            obj = Object.assign(obj, {
              root: true
            });
          }
          if (item.list && item.list.length === 0) {
            obj = Object.assign(obj, {
              isEnd: true
            });
          }
          list.push(obj);
          if (item.list && item.list.length > 0) {
            handle2(item.list, idx + 1, color, category);
          }
        });
      }
      // 计算links
      function handle3(arr, index, color) {
        arr.forEach(item => {
          if (item.list) {
            item.list.forEach((item2, eq) => {
              if (index === 0) {
                color = colors.find((itemm, eq2) => eq2 == eq % 10);
              }
              let lineStyle = null;
              switch (index) {
                case 0:
                  if (item2.list.length > 0) {
                    lineStyle = {
                      normal: {
                        color: "target"
                      }
                    };
                  } else {
                    lineStyle = {
                      normal: {
                        color: color.c2
                      }
                    };
                  }
                  break;
                default:
                  lineStyle = {
                    normal: {
                      color: "source"
                    }
                  };
                  break;
              }
              let obj = {
                source: item.name,
                target: item2.name,
                lineStyle
              };
              links.push(obj);
              if (item2.list && item.list.length > 0) {
                handle3(item.list, index + 1);
              }
            });
          }
        });
      }
      var itemStyle = {
        //设置圆形的样式
        shadowBlur: 10,
        shadowColor: "rgba(120, 36, 50, 0.5)",
        shadowOffsetY: 5
      };
      let myChart = this.$echarts.init(this.$refs.conversion1);
      myChart.setOption({
        toolbox: {
          // show: true,
          // left: "right",
          // right: 20,
          // top: "bottom",
          // bottom: 20,
        },
        color: legendColor,
        selectedMode: "false",
        bottom: 20,
        left: 0,
        right: 0,
        top: 0,
        animationDuration: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            name: "知识图谱",
            type: "graph",
            hoverAnimation: true,
            layout: "force",
            force: {
              repulsion: 450,
              edgeLength: 120
            },
            nodeScaleRatio: 0.6,
            draggable: true,
            roam: true,
            symbol: "circle",
            data: list,
            links: links,
            categories: categories,
            focusNodeAdjacency: true,
            scaleLimit: {
              //所属组件的z分层，z值小的图形会被z值大的图形覆盖
              min: 0.5, //最小的缩放值
              max: 9 //最大的缩放值
            },
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 8],
            label: {
              normal: {
                show: true,
                position: "absolute",
                color: "#fff",
                distance: 5,
                fontSize: 12
              }
            },
            lineStyle: {
              normal: {
                width: 1.5,
                curveness: 0,
                type: "solid"
              }
            }
          }
        ]
      });
    }
  },
  data() {
    return {
      tableData: [
        {
          address: "固原市原州区2.1级地震",
          type: "地震",
          time: "2020-09-27"
        },
        {
          address: "固原市隆德县2.1级地震",
          type: "地震",
          time: "2020-08-09"
        },
        {
          address: "固原市彭阳县2.1级地震",
          type: "地震",
          time: "2020-11-27"
        },
        {
          address: "固原市西吉县2.1级地震",
          type: "地震",
          time: "2020-06-12"
        },
        {
          address: "固原市泾源县2.1级地震",
          type: "地震",
          time: "2020-05-22"
        },
        {
          address: "固原市原州区2.1级地震",
          type: "地震",
          time: "2020-01-09"
        },
        {
          address: "固原市隆德县2.1级地震",
          type: "地震",
          time: "2020-10-11"
        },
        {
          address: "固原市彭阳县2.1级地震",
          type: "地震",
          time: "2020-03-25"
        },
        {
          address: "固原市西吉县2.1级地震",
          type: "地震",
          time: "2020-06-27"
        },
        {
          address: "固原市泾源县2.1级地震",
          type: "地震",
          time: "2020-08-18"
        },
        {
          address: "固原市彭阳县2.1级地震",
          type: "地震",
          time: "2020-09-22"
        },
        {
          address: "固原市原州区2.1级地震",
          type: "地震",
          time: "2020-05-21"
        }
      ]
    };
  }
};
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.main-1 {
  height: 100%;
  width: 100%;
  position: fixed;
  display: inline-block;
  position: absolute;
  left: 0;
  background: url("../assets/img/background1.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.down {
  height: 70%;
  width: 88.5%;
  margin-top: 156px;
  margin-left: 110px;
  display: inline-block;
  position: absolute;
}
.up {
  height: 10%;
  width: 100%;
  margin-top: 860px;
  display: inline-block;
  position: absolute;
}
.up-left {
  width: 100px;
  margin-top: 60px;
  display: inline-block;
  position: absolute;
}
.up-right {
  width: 100px;
  margin-top: 60px;
  display: inline-block;
  position: absolute;
}
.left-zai {
  height: 680px;
  width: 400px;
  margin-top: -20px;
  margin-left: 0px;
  border: 1px auto;
  display: inline-block;
  position: absolute;
  opacity: 1;
}
.famous {
  height: 80px;
  width: 120px;
  display: inline-block;
  margin-left: 0px;
  margin-top: 0px;
}
.font-1 {
  font-size: 24px;
  color: #ffffff;
  margin-top: -85px;
  margin-left: 15px;
  font-family: YouSheBiaoTiHei;
}
.center-zai {
  height: 680px;
  width: 840px;
  border: 1px auto;
  margin-top: 0px;
  margin-left: 350px;
  display: inline-block;
  position: absolute;
}
.right-zai {
  height: 680px;
  width: 400px;
  margin-top: 0px;
  margin-left: 1300px;
  border: 1px auto;
  display: inline-block;
  position: absolute;
}
.font-2 {
  font-size: 24px;
  margin-top: -6px;
  margin-left: 220px;
  display: inline-block;
  position: absolute;
  color: #ffffff;
  font-family: YouSheBiaoTiHei;
}
.famous-1 {
  height: 80px;
  width: 120px;
  position: absolute;
  display: inline-block;
  margin-left: 383px;
  margin-top: 0px;
}
.peep {
  color: #fff;
  margin-top: 30px;
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}
.div.cell {
  color: #ffffff;
  font-size: 28px;
}
.el-table th {
  overflow: hidden;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 18px;
}
.el-table_1_column_1 {
  color: #ffffff;
}
.el-table_1_column_2 {
  color: #ffffff;
}
.el-table_1_column_3 {
  color: #ffffff;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #555;
  /* background-color: rgba(54, 230, 208, 0.5); */
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #555;
}
.el-table,
.el-table__expanded-cell {
  /* background-color: transparent; */
  background: #555;
  opacity: 0.8;
  color: #fff;
}

.el-table tr {
  background-color: transparent !important;
}
.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.el-table__row > td {
  border: none;
}
/* 清除底部横线 */
.el-table::before {
  height: 0px;
}
.el-table tbody tr:hover > td {
  background-color: #2cce34 !important;
}
/deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
/deep/ .el-table tr {
  background-color: transparent !important;
}
/deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.home {
  cursor: pointer;
  top: 6%;
  font-size: 32px;
  right: 2%;
  color: #fff;
  position: absolute;
}
</style>
